<template>
  <div class="my_repair">
    <van-nav-bar
      title="我的报修"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
    />
    <div class="select_info">
      <span @click="select">{{ selectInfo }}</span>
      <svg-icon @click="select" icon-class="我的报修-箭头"></svg-icon>
    </div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        class="dynamic-list-style"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <ul class="repair_ul">
          <li v-for="o in contentList" :key="o.id" class="repair_list">
            <span class="repair_title">{{ o.description }}</span>
            <span
              class="status_title"
              :style="{ background: statusColor(o.status) }"
              >{{ o.statusName }}</span
            >
            <p class="repair_time_des">
              <svg-icon icon-class="我的报修-预约时间"></svg-icon>
              <span>预约时间</span>
            </p>
            <p class="repair_time">{{ o.repairDate }}</p>
            <div
              class="status_btn"
              :style="{ background: statusBtnColor(o.status) }"
              @click="operate(o)"
            >
              <span>{{ o.status === 10 ? "取消" : "删除" }}</span>
            </div>
          </li>
        </ul>
      </van-list></van-pull-refresh
    >
    <van-popup v-model="showLoading">
      <van-loading color="#DC4630" />
    </van-popup>
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
  </div>
</template>

<script>
import smartProperty from "@/controller/smartProperty.js";
import constant from "@/controller/constant.js";
export default {
  name: "myRepair",
  data() {
    return {
      showLoading: false,
      loading: false,
      finished: false,
      isLoading: false,
      contentList: [],
      selectInfo: "类型筛选",
      show: false,
      actions: [
        {
          name: "全部",
          value: ""
        },
        {
          name: "未接受",
          value: 10
        },
        {
          name: "已接受",
          value: 20
        },
        {
          name: "已处理",
          value: 30
        },
        {
          name: "已取消",
          value: 40
        }
      ],
      curPage: 1,
      pageSize: 10,
      userId: null,
      repairType: ""
    };
  },
  computed: {
    statusColor() {
      return function(status) {
        let bgColor = "";
        if (status === 10) {
          bgColor = "#DC4630";
        } else {
          bgColor = "#BFC2CC";
        }
        return bgColor;
      };
    },
    statusBtnColor() {
      return function(status) {
        let bgColor = "";
        if (status === 10) {
          bgColor = "#DC4630";
        } else {
          bgColor = "#BFC2CC";
        }
        return bgColor;
      };
    }
  },
  mounted() {
    this.userId = JSON.parse(localStorage.getItem("userInfo")).currentUser.id;
  },
  methods: {
    onRefresh() {
      this.contentList = [];
      setTimeout(() => {
        this.curPage = 1;
        this.pageSize = 10;
        this.getMyRepairList();
        this.isLoading = false;
      }, 500);
    },
    onLoad() {
      this.getMyRepairList();
    },
    getMyRepairList() {
      this.showLoading = true;
      const data = {
        createBy: this.userId,
        curPage: this.curPage,
        pageSize: this.pageSize,
        status: this.repairType
      };
      smartProperty
        .community_repair_apply_page(data)
        .then(res => {
          if (res.code === "0") {
            if (
              (res.datas && res.datas.records.length === 0) ||
              res.datas === null
            ) {
              this.$toast("暂无更多数据");
              this.loading = false;
              this.isLoading = false;
              this.finished = true;
              return;
            }
            this.$nextTick(() => {
              this.loading = false;
              this.isLoading = false;
            });
            this.contentList = [...this.contentList, ...res.datas.records];
            this.curPage = this.curPage + 1;
            if (res.datas.records.length < this.pageSize) {
              this.finished = true;
            }
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        })
        .catch(() => {})
        .then(() => {
          this.showLoading = false;
        });
    },
    select() {
      this.show = true;
    },
    onSelect(item) {
      this.selectInfo = item.name;
      this.repairType = item.value;
      this.show = false;
      this.curPage = 1;
      this.pageSize = 10;
      this.contentList = [];
      this.getMyRepairList();
    },
    handleCancel(id) {
      smartProperty.community_repair_apply_cancel(id).then(res => {
        if (res.code === "0") {
          this.$toast("操作成功");
          this.getMyRepairList();
        } else {
          if (res && res.msg) {
            this.$toast(res.msg);
          } else {
            this.$toast(constant.unusualMsg);
          }
        }
      });
    },
    handleDelete(ids) {
      smartProperty.community_repair_apply_ids(ids).then(res => {
        if (res.code === "0") {
          this.$toast("操作成功");
          this.getMyRepairList();
        } else {
          if (res && res.msg) {
            this.$toast(res.msg);
          } else {
            this.$toast(constant.unusualMsg);
          }
        }
      });
    },
    operate(item) {
      this.curPage = 1;
      this.pageSize = 10;
      this.contentList = [];
      if (item.status === 10) {
        this.handleCancel(item.id);
      } else {
        this.handleDelete([item.id]);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../styles/workstation.scss";

.my_repair {
  background: #ffffff !important;
  height: 100%;

  .select_info {
    padding: 10px 15px;
    font-size: 16px;
    border-bottom: 1px solid rgba(226, 226, 226, 0.5);

    span {
      color: #333333;
      line-height: 22.5px;
      margin-right: 7px;
    }
  }

  .repair_ul {
    .repair_list {
      border-bottom: 1px solid rgba(226, 226, 226, 0.5);
      padding: 15px;
      color: #333333;
      position: relative;
      background: #ffffff;

      .status_btn {
        position: absolute;
        right: 15px;
        bottom: 15px;
        border-radius: 4px;
        color: #ffffff;
        font-size: 13px;
        padding: 0 10.5px;
        line-height: 25.5px;
      }

      .repair_title {
        font-size: 14px;
        line-height: 20px;
      }
      .status_title {
        margin-left: 10px;
        font-size: 14px;
        line-height: 20px;
        color: #ffffff;
      }

      p {
        margin: 8px 0 0 0;

        span {
          margin-left: 5px;
          font-size: 14px;
          color: #999999;
        }
      }

      .repair_time {
        font-size: 12px;
      }
    }
  }
}
</style>
